前幾天一直說要「把 CAD 模型轉成網頁看得懂的格式」。今天先搞清楚：為什麼要轉？CAD 存的檔案，跟網頁載入的檔案，差在哪？

用食品代工廠的比喻。要把一個蛋糕的資訊交給別人，有三種存法，每一種都對應一個 3D 格式。

第一種：食譜 → STEP

食譜記的是「怎麼做出來」：麵粉幾克、烤幾度、模具直徑多少。拿到食譜的人可以做大一號、小一號，尺寸也能精準量出來，因為它是用數學公式在描述形狀。

工程師的 CAD 檔就是這種。它的專業名稱叫 B-rep（Boundary Representation，邊界表示）：一個物體由很多個「面」組成，每個面是精確的數學曲面。STEP 是 CAD 軟體之間交換這類資料的標準格式。

STEP 還有一個很重要的能力：它能記錄產品結構——這台機器由哪幾個組件、哪些零件組成，每個零件叫什麼名字、什麼顏色。就像食譜上會寫「蛋糕體」「奶油霜」「裝飾」各自的做法。

缺點：檔案重，而且瀏覽器完全看不懂食譜。

第二種：成品拆成小三角形貼片 → STL

想像不給食譜，而是把蛋糕的外表，用非常多小三角形貼片拼出來。這種「用三角形拼出表面」的做法叫 mesh（網格）。

STL 是最早也最通用的貼片格式，名字來自 STereoLithography（光固化成型），最初就是為 3D 列印發明的。它的規矩極簡單：只記錄一堆三角形的座標，別的什麼都不記。3D 列印機吃這一套，因為列印只需要知道外形。

但貼片只保留「外殼的樣子」：沒有顏色、沒有零件名稱、也不知道哪幾片屬於同一個零件。整個蛋糕變成一鍋貼片湯，想單獨點選某個零件？資料根本不存在。

第三種：宅配出貨包裹 → glTF / GLB

glTF 全名 GL Transmission Format（GL 傳輸格式），由制定 WebGL 的 Khronos Group 訂定，常被形容成「3D 界的 JPEG」：JPEG 是照片在網路上傳輸與顯示的通用格式，glTF 則是 3D 模型在網路上傳輸與即時顯示的通用格式。名字裡的「傳輸」二字就是設計目的——不是為了編輯，而是為了「快速送到、快速顯示」。

宅配包裹同樣是三角形貼片拼出外形，但它有一套為「快速運送、快速拆封上架」設計的規矩：

• 有層級關係：包裹裡有大箱、大箱裡有小盒，對應零件跟組件的從屬（專業名稱叫 node，節點；整體叫場景樹）
• 有材質：金屬感、粗糙度這類外觀設定（叫 PBR 材質）
• 有備註欄：可以附上自訂資訊，例如我們自己的零件編號（叫 extras）

glTF 和 GLB 是同一種格式，差在「包裝方式」：

• .gltf：拆開寄。說明書（JSON 文字檔）、貼片資料、貼圖圖片各是一個獨立檔案，收件人要三樣都收到才能開箱。
• .glb：全部封進同一個箱子。同樣的內容，打包成單一檔案（GLB 就是 glTF Binary 的縮寫）。

網頁展示要傳輸、要離線播放，「一個檔案搞定」最省事，所以這個系統最後交付的一律是 GLB。

而且宅配可以真空壓縮：專用的壓縮技術（幾何用 Draco，貼圖用 KTX2）能把體積縮到原本的一小部分，網頁載入才快。

對照表

從食譜變成包裹：管線在做什麼

整條生產線的核心工作，就是把「食譜」變成「宅配包裹」，中間有兩個關鍵動作：

1. 把曲面切成貼片（專業名稱：tessellation，細分）。貼片切得越細，圓弧越圓滑，但檔案越大；切太粗，圓的東西會出現稜角。怎麼取捨，是後面「面數預算」那幾篇的主題。
2. 轉的時候別把名字弄丟。食譜上的零件名稱與顏色，要一一搬進包裹的層級與備註欄。如果搬丟了，之後想做「點選零件看介紹」就沒有資料可用——這也是為什麼前面幾天一直強調零件樹。

另外還有一個容易搞混的小細節：方向與單位。CAD 習慣用公釐、把 Z 軸當作「上」；網頁的 3D 格式用公尺、把 Y 軸當作「上」。就像兩張地圖對「哪邊是北」的定義不同，如果每個環節都各自換算，很容易換錯或重複換。所以這個系統規定：內部統一用一套，只在最後出貨那一步換一次。

下一篇會先準備一個可以重現的範例模型，之後才能真的動手轉一次。